<template>
  <el-container>
    <div class="header row margin-bottom20">
      <div class="col">团队名称：{{ data.name }}</div>
      <div class="col">团队管理员：{{ data.user?.name }}</div>
    </div>
    <el-header class="margin-bottom20 padding0">
      <el-button-group>
        <el-button
          v-for="link in links"
          :key="link.name"
          v-show="link.show"
          :class="activeClass(link.name)"
          plain
        >
          <router-link
            class="stretched-link"
            :to="{ name: link.name, params: { ID } }"
            >{{ link.label }}</router-link
          >
        </el-button>
      </el-button-group>
    </el-header>
    <router-view
      :ID="Number(ID)"
      :group="group"
      :start="start"
      :team="data"
      :teamusers="teamusers"
    ></router-view>
  </el-container>
</template>

<script setup lang="ts">
import { inject, onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
import {
  asyncfindteamusergroup,
  asyncselectteams,
  asyncselectteamuser,
} from "../../../api/index";
import Studycodemodel from "../../../mysql_interface/studycodemodel";

// 码客行
const tenant_id = inject<string | undefined>("tenant_id", undefined);

const prop = defineProps<{ ID: number }>();
const data = ref<Studycodemodel.Iteam>({ user: {} });
const group = ref<Studycodemodel.Iteamusergroup[]>([]);
const teamusers = ref<Studycodemodel.Iteamuser[]>([]);

const route = useRoute();

const links = [
  { name: "团队人员", label: "团队人员", show: true },
  { name: "团队用户组", label: "团队用户组", show: true },
  { name: "团队课程包", label: "团队课程包", show: true },
  { name: "团队短信", label: "发送短信", show: true },
  { name: "团队文件", label: "资料", show: true },
  { name: "团队文件下载记录", label: "下载记录", show: true },
  { name: "团队地址", label: "团队地址", show: true },
  { name: "成员周数据", label: "成员周数据", show: !tenant_id },
  // 团队作业
  // 团队任务
  // 团队题单
  // 团队题目
];

const activeClass = (linkName: string) => {
  return route.name === linkName ? "button-active" : "";
};

async function start() {
  const { rows } = await asyncselectteams({ ID: prop.ID });
  data.value = rows[0];
  group.value = await asyncfindteamusergroup({ teamid: prop.ID });
  getusers();
}

async function getusers() {
  const data = await asyncselectteamuser({ teamid: prop.ID });
  teamusers.value = data.rows;
}

onMounted(() => {
  start();
});

watch(
  () => prop.ID,
  () => {
    start();
  }
);
</script>

<style scoped>
.header {
  background-color: var(--sass-color-blue3);
  padding: 10px;
  color: #fff;
  font-weight: bolder;
  font-size: 14px;
}

.button-active {
  background-color: var(--sass-color-blue) !important;
  color: #fff !important;
}

.router-link-active,
.router-link-exact-active {
  color: #fff;
  font-weight: bolder;
}
</style>
